<template>
    <div class="dashboard-view">
      <div class="dashboard-header">
        <h1>医院预约挂号数据大屏</h1>
        <div class="dashboard-subtitle">实时掌握医院预约动态，辅助管理决策</div>
      </div>
      <div class="dashboard-main">
        <div class="dashboard-row">
          <div class="dashboard-card">
            <div class="card-title">今日预约量</div>
            <div class="card-value highlight">{{ todayCount }}</div>
            <div class="card-desc">较昨日 <span :class="trendClass(todayTrend)">{{ todayTrend > 0 ? '+' : '' }}{{ todayTrend }}%</span></div>
          </div>
          <div class="dashboard-card">
            <div class="card-title">累计预约量</div>
            <div class="card-value">{{ totalCount }}</div>
            <div class="card-desc">本月新增 {{ monthCount }}</div>
          </div>
          <div class="dashboard-card">
            <div class="card-title">高峰时段</div>
            <div class="card-value">{{ peakHour }}</div>
            <div class="card-desc">{{ peakDesc }}</div>
          </div>
          <div class="dashboard-card">
            <div class="card-title">活跃医生数</div>
            <div class="card-value">{{ doctorCount }}</div>
            <div class="card-desc">本周新增 {{ newDoctorCount }}</div>
          </div>
        </div>
        <div class="dashboard-row dashboard-charts">
          <div class="dashboard-chart-card">
            <div class="chart-title">各科室预约分布</div>
            <v-chart :option="deptPieOption" autoresize style="height:260px;" />
          </div>
          <div class="dashboard-chart-card">
            <div class="chart-title">挂号高峰时段趋势</div>
            <v-chart :option="peakLineOption" autoresize style="height:260px;" />
          </div>
          <div class="dashboard-chart-card">
            <div class="chart-title">医生工作量排行</div>
            <v-chart :option="doctorBarOption" autoresize style="height:260px;" />
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import VChart from 'vue-echarts'
  import { use } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { PieChart, LineChart, BarChart } from 'echarts/charts'
  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
  use([CanvasRenderer, PieChart, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
  
  // 仿真数据
  const todayCount = ref(312)
  const todayTrend = ref(8.2)
  const totalCount = ref(12890)
  const monthCount = ref(2100)
  const peakHour = ref('09:00-10:00')
  const peakDesc = ref('上午9-10点为挂号高峰，建议合理分流')
  const doctorCount = ref(87)
  const newDoctorCount = ref(3)
  
  const deptPieOption = {
    tooltip: { trigger: 'item' },
    legend: { top: 'bottom', textStyle: { color: '#e0e6f1', fontWeight: 600, fontSize: 15 } },
    series: [
      {
        name: '预约量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: { show: false, color: '#fff', fontWeight: 700 },
        emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold', color: '#ffd600' } },
        labelLine: { lineStyle: { color: '#e0e6f1' } },
        data: [
          { value: 3200, name: '内科系统' },
          { value: 2800, name: '外科系统' },
          { value: 2100, name: '专科门诊' },
          { value: 1800, name: '医技科室' },
          { value: 2990, name: '特色诊疗中心' }
        ]
      }
    ]
  }
  const peakLineOption = {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00'] },
    yAxis: { type: 'value' },
    series: [
      {
        data: [30, 80, 160, 120, 90, 60, 40, 55, 70, 60, 45],
        type: 'line',
        smooth: true,
        areaStyle: { color: '#e3f2fd' },
        lineStyle: { color: '#1976d2', width: 3 },
        symbol: 'circle',
        symbolSize: 10
      }
    ]
  }
  const doctorBarOption = {
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, bottom: 30, top: 30 },
    xAxis: { type: 'value', boundaryGap: [0, 0.01] },
    yAxis: {
      type: 'category',
      data: ['李明','王芳','张伟','李娜','赵强','钱丽','孙健','周敏']
    },
    series: [
      {
        name: '预约量',
        type: 'bar',
        data: [320, 280, 210, 180, 170, 160, 150, 140],
        itemStyle: { color: '#1976d2' },
        barWidth: 18
      }
    ]
  }
  const trendClass = (val:number) => val >= 0 ? 'trend-up' : 'trend-down'
  </script>
  <style scoped>
  .dashboard-view {
    background: #0a1832;
    min-height: 100vh;
    padding: 0 0 40px 0;
  }
  .dashboard-header {
    text-align: center;
    padding: 40px 0 20px 0;
  }
  .dashboard-header h1 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px #0a1832;
  }
  .dashboard-subtitle {
    color: #e0e6f1;
    font-size: 1.18rem;
    margin-bottom: 10px;
    text-shadow: 0 1px 4px #0a1832;
  }
  .dashboard-main {
    max-width: 1400px;
    margin: 0 auto;
  }
  .dashboard-row {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
  }
  .dashboard-card {
    flex: 1;
    background: linear-gradient(135deg, #182c4c 60%, #223a5e 100%);
    border-radius: 18px;
    padding: 32px 24px 24px 24px;
    color: #fff;
    box-shadow: 0 4px 24px rgba(25, 118, 210, 0.13);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .card-title {
    color: #e0e6f1;
    font-size: 1.13rem;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .card-value {
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
    text-shadow: 0 2px 8px #0a1832;
    margin-bottom: 8px;
  }
  .card-value.highlight {
    color: #ffd600;
    font-size: 2.7rem;
    text-shadow: 0 2px 8px #0a1832;
  }
  .card-desc {
    color: #b0c4de;
    font-size: 1.05rem;
    font-weight: 500;
  }
  .trend-up {
    color: #4caf50;
    font-weight: 700;
  }
  .trend-down {
    color: #e53935;
    font-weight: 700;
  }
  .dashboard-charts {
    gap: 24px;
  }
  .dashboard-chart-card {
    flex: 1;
    background: #162447;
    border-radius: 18px;
    padding: 18px 18px 0 18px;
    color: #fff;
    box-shadow: 0 4px 24px rgba(25, 118, 210, 0.08);
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .chart-title {
    color: #e0e6f1;
    font-size: 1.13rem;
    font-weight: 700;
    margin-bottom: 10px;
  }
  </style> 